<template>
  <div class="allgoods-container">
    <van-loading v-show="loading" vertical color="#0094ff">
      加载中...
    </van-loading>
    <SearchInput showBack v-model="word" @onSearch="onSearch" />
    <van-tabs
      :sticky="true"
      class="style-scroll"
      v-model="category_name"
      @change="tabChange"
    >
      <van-tab title="全部" name="" />
      <van-tab
        :title="c.category_name"
        :name="c.category_name"
        :key="c.category_id"
        v-for="c in categoryList"
      />
    </van-tabs>
    <GoodsEmpty
      v-if="list.length === 0"
      img="goods"
      title="还未发现该种类商品"
    />
    <van-list
      v-else
      v-model="listLoad"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad"
    >
      <GoodsList :list="list" />
    </van-list>
  </div>
</template>
<script>
export default {
  name: "allGoods",
  async asyncData({ app, query }) {
    let categoryList = [],
      list = [],
      finished = true,
      page = 1,
      pagesize = 10,
      category_name = "";
    try {
      const { status, data } = await app.$apiGetGoodsCategory();
      if (status === 0) {
        categoryList = data;
      }
    } catch (error) {}
    try {
      const { category_name: c } = query;
      category_name = c;
      const res = await app.$apiGetGoodsList({ category_name: c });
      const { data, status, total, pagesize: ps, page: p } = res;
      if (status === 0) {
        finished = p * ps >= total;
        page = p + 1;
        list = data;
      }
    } catch (error) {}
    return {
      list,
      categoryList,
      finished,
      page,
      pagesize,
      category_name,
      loading: false
    };
  },
  data: () => ({
    list: [],
    word: null,
    loading: true,
    category_name: "",
    listLoad: false,
    page: 1,
    pagesize: 10
  }),
  methods: {
    onSearch(word) {
      this.$router.push({
        name: "search",
        query: {
          word
        }
      });
    },
    getList(data) {
      this.$apiGetGoodsList(data)
        .then(res => {
          const { page, data, status, pagesize, total } = res;
          if (status === 0) {
            this.finished = pagesize * page >= total;
            this.list.push(...data);
            this.page = page + 1;
            this.pagesize = pagesize;
          }
        })
        .finally(() => {
          this.listLoad = false;
        });
    },
    tabChange(val) {
      if (!val) {
        this.$router.replace({
          name: "all-goods",
          query: { category_name: val }
        });
        return
      }
      this.$router.push({ name: "all-goods", query: { category_name: val } });
    },
    onLoad() {
      const { page, pagesize, category_name } = this;
      this.getList({ page, pagesize, category_name });
    }
  },
  watchQuery: ["category_name"]
};
</script>

<style lang="scss" scoped>
.allgoods-container {
  position: relative;
  padding: 80px 0 50px;
  height: 100vh;
  box-sizing: border-box;
  overflow-y: auto;
  ::v-deep .empty {
    margin-top: 50px;
  }
  .search-input {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    background: #fff;
  }
  .style-scroll {
    position: fixed;
    left: 0;
    right: 0;
    top: 50px;
    padding: 0 10px;
    height: 30px;
    line-height: 30px;
    font-size: 14px;
    background: #fff;
    ::v-deep .van-tabs__nav {
      padding: 0;
    }
    ::v-deep .van-tab--active {
      // padding: 0;
      color: #1989fa;
    }
    ::v-deep .van-tabs__line {
      display: none;
    }
    ::v-deep .van-tabs__wrap {
      height: 30px;
    }
  }
  .van-loading {
    position: fixed;
    top: 80px;
    left: 0;
    right: 0;
    height: calc(100% - 80px);
    background: #fff;
    justify-content: center;
  }
  // .van-list{
  //   height: calc(100% - 1.3rem);

  //   height: 100%;
  //   overflow-y: auto;
  // }
}
</style>
